<template>
	<s-layout :title="state.model.id ? '编辑设备' : '新增设备'">
		<uni-forms ref="addressFormRef" v-model="state.model" :rules="state.rules" validateTrigger="bind"
			labelWidth="160" labelAlign="left" border :labelStyle="{ fontWeight: 'bold' }">
			<view class="bg-white form-box ss-p-x-30">
				<uni-forms-item name="device_id" label="设备编号" class="form-item">
					<uni-easyinput v-model="state.model.device_id" placeholder="请填写设备编号" :inputBorder="false"
						placeholderStyle="color:#BBBBBB;font-size:30rpx;font-weight:400;line-height:normal" />
				</uni-forms-item>

				<uni-forms-item name="mobile" label="手机号" class="form-item">
					<uni-easyinput  v-model="state.model.mobile" type="number" placeholder="请输入手机号" :inputBorder="false"
						placeholderStyle="color:#BBBBBB;font-size:30rpx;font-weight:400;line-height:normal">
					</uni-easyinput>
				</uni-forms-item>

			</view>

		</uni-forms>
		<su-fixed bottom :opacity="false" bg="" placeholder :noFixed="false" :index="10">
			<view class="footer-box ss-flex-col ss-row-between ss-p-20">
				<view class="ss-m-b-20"><button class="ss-reset-button save-btn ui-Shadow-Main"
						@tap="onSave">保存</button></view>
				<button v-if="state.model.id" class="ss-reset-button cancel-btn" @tap="onDelete">
					删除
				</button>
			</view>
		</su-fixed>

	</s-layout>
</template>

<script setup>
	import {
		computed,
		watch,
		ref,
		reactive,
		unref
	} from 'vue';
	import sheep from '@/sheep';
	import {
		onLoad,
		onPageScroll,
		onShow
	} from '@dcloudio/uni-app';
	import _ from 'lodash';
	import {
		device_id,
		mobile,
		address,
		region
	} from '@/sheep/validate/form';
	import {
		clone
	} from 'lodash';

	const userInfo = computed(() => sheep.$store('user').userInfo);

	const addressFormRef = ref(null);
	const state = reactive({
		showRegion: false,
		model: {
			device_id: '',
			mobile: '',
		},
		rules: {
			device_id,
			mobile,
		},
	});
watch(userInfo, (newUserInfo) => {
    if (newUserInfo && newUserInfo.mobile) {
        state.model.mobile = newUserInfo.mobile;
    }
}, { immediate: true }); // immediate: true 是为了首次加载时就执行一次
	const onRegionConfirm = (e) => {
		state.model = {
			...state.model,
			...e,
		};
		state.showRegion = false;
	};
	const onSave = async () => {
		const validate = await unref(addressFormRef)
			.validate()
			.catch((error) => {
				console.log('error: ', error);
			});
		if (!validate) return;

		let res = null;
		if (state.model.id) {
			res = await sheep.$api.user.device.update(state.model.id, state.model);
		} else {
			res = await sheep.$api.user.device.add(state.model);
		}
		if (res.code === 1) {
			sheep.$router.back();
		}
	};
	const onDelete = () => {
		uni.showModal({
			title: '提示',
			content: '确认删除此设备吗？',
			success: async function(res) {
				if (res.confirm) {
					const {
						code
					} = await sheep.$api.user.device.delete(state.model.id);
					console.log(res.code)
					if (res.code === 1) {
						sheep.$router.go('/pages/user/device/device');
					}
				}
			},
		});
	};
	const getUserInfo = async () => {
		try {
			const userInfo = await sheep.$store('user').getInfo();
			if (!userInfo) {
				uni.showToast({
					title: '请先登录',
					icon: 'none',
					duration: 2000,
				});
				state.model.mobile = ''; // 未登录时清空手机号
				return;
			}
	
			// 如果已登录，获取手机号
			state.model.mobile = clone(userInfo.mobile || '');
		} catch (error) {
			console.error('获取用户信息失败:', error);
			state.model.mobile = ''; // 获取失败时清空手机号
		}
	};
	onLoad(async (options) => {
		console.log(options);
		// getAreaData();
		
		// #ifdef MP
			  // 小程序识别二维码
			  if (options.device_id) {
				const sceneParams = decodeURIComponent(options.device_id).split('=');
				console.log('1');
				options[sceneParams[0]] = sceneParams[1];
				state.model.device_id = options.device_id;
				console.log(options);
			  }
		  // #endif
		  
		console.log(state.model)
		if (options.id) {
			let res = await sheep.$api.user.device.madetail(options.id);
			if (res.code === 1) {
				state.model = res.data;
				console.log(state.model);
			}		
			
		}
		getUserInfo();

		if (options.data) {
			let data = JSON.parse(options.data);
			state.model = {
				...state.model,
				...data,
			};
		}
		
	});
	onShow(async () => {
		console.log('页面显示，开始刷新用户信息');
			getUserInfo();
	});
</script>

<style lang="scss" scoped>
	:deep() {
		.uni-forms-item__label .label-text {
			font-size: 28rpx !important;
			color: #333333 !important;
			line-height: normal !important;
		}

		.uni-easyinput__content-input {
			font-size: 28rpx !important;
			color: #333333 !important;
			line-height: normal !important;
			padding-left: 0 !important;
		}

		.uni-easyinput__content-textarea {
			font-size: 28rpx !important;
			color: #333333 !important;
			line-height: normal !important;
			margin-top: 8rpx !important;
		}

		.uni-icons {
			font-size: 40rpx !important;
		}

		.is-textarea-icon {
			margin-top: 22rpx;
		}

		.is-disabled {
			color: #333333;
		}
	}

	.default-box {
		width: 100%;
		box-sizing: border-box;
		height: 100rpx;

		.default-box-title {
			font-size: 28rpx;
			color: #333333;
			line-height: normal;
		}
	}

	.footer-box {
		.save-btn {
			width: 710rpx;
			height: 80rpx;
			border-radius: 40rpx;
			background: linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient));
			color: $white;
		}

		.cancel-btn {
			width: 710rpx;
			height: 80rpx;
			border-radius: 40rpx;
			background: var(--ui-BG);
		}
	}
</style>